import React, { FC } from "react"
import { Link, useNavigate } from "react-router-dom"
import { LOGIN_PATHNAME } from "../router"
import { UserOutlined } from "@ant-design/icons"
import { Button, message } from "antd"
import { removeToken } from "../utils/user-token"
import useGetUserInfo from "../hooks/useGetUserInfo"
import { useDispatch } from "react-redux"
import { logoutReducer } from "../store/userReducer"

const UserInfo: FC = () => {
    const nav = useNavigate()
    const dispatch = useDispatch()

    // const { data } = useRequest(getUserInfoService)
    // const { username, nickname } = data || {}

    const { username, nickname } = useGetUserInfo()

    // 退出功能
    function loginOut() {
        // 清空redux user数据
        dispatch(logoutReducer())
        // 清除token
        removeToken()
        message.success("退出成功")
        nav(LOGIN_PATHNAME)
    }

    const UserInfo = (
        <>
            <span style={{ color: "#e8e8e8", fontSize: "16px" }}>
                <UserOutlined />
                {nickname}
            </span>
            <Button type="link" onClick={loginOut}>
                退出
            </Button>
        </>
    )

    const Login = <Link to={LOGIN_PATHNAME}>登录</Link>

    return <div>{username ? UserInfo : Login}</div>
}

export default UserInfo
